import { Layout, Radio } from "antd";
import React from "react";
import ChargingAccount from "./chargingAccount";
import ChargingRule from "./chargingRule";

class Charging extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      menu:"rule"
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }


  onChange = e => {
    this.setState({menu:e.target.value})
  }

  render(){
    const { current } = this.props;
    const { menu } = this.state;
    return(
      <Layout style={{display:current == 3 ? "block" : "none"}}>
        <Layout.Header style={{padding:0,background:"#ffffff"}}>
          <Radio.Group onChange={this.onChange} value={menu}>
            <Radio.Button value="account">计费清单</Radio.Button>
            <Radio.Button value="rule">计费规则</Radio.Button>
          </Radio.Group>
        </Layout.Header>
        <Layout.Content style={{padding:0,background:"#ffffff"}}>
          {
            menu == 'account' ? <ChargingAccount onRef={ref => this.ChargingAccount = ref} /> : (
              <ChargingRule onRef={ref => this.ChargingRule = ref} />
            )
          }
          
        </Layout.Content>
      </Layout>
    )
  }
}

export default Charging